<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@include file="../base_path.jsp" %>

<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/jqgrid/5.2.1/css/ui.jqgrid-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css"/>
    <link type="text/css" rel="stylesheet" href="<%=basePath%>/lib/bootstrap-select/css/bootstrap-select.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/mycss.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/css/pageNav.css" />
    <title>机器人监控</title>
    <style>
        .bg-status {
            position: relative;
            height: 100%;
            padding-top: 20px;
            padding-left: 20px;
        }

        .bg-status img{
            position: absolute;
            top: 50%;
            right: 10%;
            height: 32px;
            margin-top:-16px;
        }

        .bg-info{
            background-color: transparent;
            background-image: url(<%=basePath%>/images/image/status1.png);
            background-size: 100% 100%;
        }

        .bg-success {
            background-color: transparent;
            background-image: url(<%=basePath%>/images/image/status2.png);
            background-size: 100% 100%;
        }

        .bg-primary {
            background-color: transparent;
            background-image: url(<%=basePath%>/images/image/status3.png);
            background-size: 100% 100%;
        }

        .bg-danger {
            background-color: transparent;
            background-image: url(<%=basePath%>/images/image/status4.png);
            background-size: 100% 100%;
        }

        .p-tit {
            font-size: 13px;
            color: #FFF;
            margin-bottom: 0px;
        }

        .p-num {
            font-size: 23px;
            color: #FFF;
        }
        #form_filter .control-label {
            float: left;
        }
    </style>
</head>
<body>
<div class="navbar-fixed-top">
    <div class="breadcrumb">
        <span>呼入中心</span>/
        <span>数据报表</span>/
        <span class="active">IVR报表</span>
        <span class="pull-right" title="刷新">
           <div class="btn-refresh" onclick="location.replace(location.href);">
           	<img src="<%=basePath%>/images/refresh.png" >
           </div>
        </span>

    </div>
</div>

<div class="container-fluid">
    <div class="container-fluid-main">
        <div class="page-header">
            <h3>IVR报表</h3>
        </div>
        <div class="panel panel-default" style="border: none;">

            <div class="panel-body">
                <form class="form-horizontal" role="form" id="form_filter">
                    <div class="form-group">
                        <div class="row">
                            <label class="control-label" style="float: left; margin-left: 50px">统计时间</label>
                            <div class="col-xs-2">
                                <input type="text" class="form-control input-sm Wdate" id="begin_date" autocomplete="off"
                                       disableautocomplete
                                       onclick="var end_date=$dp.$('end_date');WdatePicker({isShowClear:false,
                                   onpicked:function(dq){var myobj=isCleanEndDate(dq.cal.getNewDateStr(),end_date.value);
                                   if(!myobj.ispass){end_date.value=myobj.maxDay;}},
                                       errDealMode:1,dateFmt: 'yyyy-MM-dd', maxDate:'%y-%M-%d'})">
                            </div>
                            <label class="control-label" style="padding-left: 0;">至</label>
                            <div class="col-xs-2">
                                <input type="text" class="form-control input-sm Wdate" id="end_date" autocomplete="off"
                                       disableautocomplete
                                       onclick="var begin_date=$dp.$('begin_date');var begin_datestr=begin_date.value;if(isEmpty(begin_datestr)){
                                        bootbox.alert('请先选择开始日期');return false;}
                                       WdatePicker({isShowClear:false,errDealMode:1,dateFmt: 'yyyy-MM-dd',
                                       minDate:'#F{$dp.$D(\'begin_date\')}', maxDate:'#F{getMaxDay($dp.$D(\'begin_date\'))}'})">
                            </div>
                            <div class="left">
                                <button class="btn btn-primary btn-sm" id="btn_query" type="button">查询</button>
                            </div></div>
                        <div class="row col-xs-12"  style="display: flex;justify-content: flex-end">

                            <div class="col-xs-2">
                                <select class="form-control input-sm" id="case_type" placeholder="请选择指标（单选）"
                                        title="请选择指标（单选）" name="case_type">
                                </select>
                            </div>

                            <div class="col-xs1">
                                <select class="form-control input-sm" id="case_type2"   name="case_type2">
                                    <option value="1" selected>按天</option>
                                    <option value="2" selected>按月</option>
                                    <option value="3" selected>按年</option>
                                </select>
                            </div>
                        </div>

                    </div>



                </form>



            </div>
        </div>
        <div  style="margin-top: 0px;padding-top: 0px;padding-bottom: 0px;">
            <div class=" row" style="margin: 0;">
                <div id="myChartIVR" style="height:300px ;width: 100%;"></div>
            </div>
        </div>

        <form class="form-horizontal" id="form_filter2">

            <div class="row" style="display: flex;justify-content: flex-end">
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-5">
                    <select id="select_business_id" class="selectpicker form-control input-sm" multiple data-live-search="true"
                            title="请选择" name="select_business_id" data-live-search-placeholder="Search" data-actions-box="true">
                    </select>

                </div>
                <div class=" col-sm-1 col-xs-1">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" id="btn_export">
                        <span class="glyphicon glyphicon-download-alt"></span>
                        导出
                    </button>

                </div>

            </div>
        </form>

        <table id="IVRJQGrid" ></table>
        <div style="height: 40px" id="IVRJQGridPager"></div>
    </div>

</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="<%=basePath%>/lib/jquery/1.11.0/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/lobibox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/messageboxes.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/notifications.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/wavesurfer.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/wavesurfer.regions.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/echarts/3.7.1/echarts.js"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('myChartIVR'));
    var caseType=$('#case_type')
    $('#case_type2').val(2)
    var  select=$('#select_business_id')
    var  select2=$('#case_type2')
    var  select3=$('#case_type')
    var  list

    function search() {
        refreshJQGrid();
    }
    var colNames=[{text: "IVR呼入量",key:'ivrIncomingCallCount'},
        {text: "IVR用户量",key:'ivrUserVolumeCount'},
        {text:"IVR应答量",key:'ivrResponseVolumeCount'},
        {text:"IVR应答率",key:'ivrResponseRate'},
        {text:"IVR放弃量",key:'ivrAbandonedQuantityCount'},
        {text:"人工进线量",key:'incomingLine'},
        {text:"人工接听量",key:'listening'},
        {text:"人工接听率",key:'listeningRate'},
        {text:"机器人接入量",key:'robotAccessVolumeCount'}
        ,{text:"机器人转人工量",key:'robotSeatingCapacityCount'},
        {text:"机器人转人工接听量",key:'robotTransferSeatReceptionVolumeCount'},
        {text:"机器人应答率",key:'robotResponseRate'},
        {text:"人工未接听量",key:'noListening'},
        {text:"人工通话时长(s)",key:'secondDay'},
        {text:"人工平均通话时长(s)",key:'avgSecondDay'},
        {text:"人工排队放弃量",key:'giveUpByQueueCount'}]
    var colNames2=[
        {text: "IVR呼入量",key:'ivrIncomingCallCount'},
        {text: "IVR用户量",key:'ivrUserVolumeCount'},
        {text:"IVR应答量",key:'ivrResponseVolumeCount'},
        {text:"IVR应答率",key:'ivrResponseRate'},
        {text:"IVR放弃量",key:'ivrAbandonedQuantityCount'},
        {text:"人工进线量",key:'incomingLine'},
        {text:"人工接听量",key:'listening'},
        {text:"人工接听率",key:'listeningRate'},
        {text:"机器人接入量",key:'robotAccessVolumeCount'}
        ,{text:"机器人转人工量",key:'robotSeatingCapacityCount'},
        {text:"机器人转人工接听量",key:'robotTransferSeatReceptionVolumeCount'},
        {text:"机器人应答率",key:'robotResponseRate'},
        {text:"人工未接听量",key:'noListening'},
        {text:"人工通话时长(s)",key:'secondDay'},
        {text:"人工平均通话时长(s)",key:'avgSecondDay'},
        {text:"人工排队放弃量",key:'giveUpByQueueCount'}]
    let caseTypeHtml=""
    var colName3=["主键","日期"]
    colNames.forEach(res=>{
        colName3.push(res.text)
    })
    //添加下拉菜单
    //遍历表格名称初始化
    var  key=[]
    colNames.forEach((res,index)=>{
        let option = document.createElement("option");
        // caseTypeHtml=caseTypeHtml+`<option value=`+res.key+' >'+res.text+`</option>`
        $(option).val(res.key);
        $(option).text(res.text);
        $('#select_business_id').append(option);
        if(res.key!=="noListening"&&res.key!=="secondDay"&&res.key!=="avgSecondDay"&&res.key!=="giveUpByQueueCount"){
            key.push(res.key)
        }
    })

    //遍历隐藏显示下拉菜单
    colNames2.forEach((res,index)=>{
        let option = document.createElement("option");
        caseTypeHtml=caseTypeHtml+`<option value=`+res.key+' >'+res.text+`</option>`
    })
    select.val(key)
    // select.html(caseTypeHtml)
    caseType.html(caseTypeHtml)
    //切换下拉菜单表格显示隐藏
    select.change(function (val) {
            console.log( select.val())
            colNames.forEach(res=>{
                $("#IVRJQGrid").hideCol(res.key);
            })
            select.val().forEach(res=>{
                if(res){
                    $("#IVRJQGrid").showCol(res);
                }
            })
            $("#IVRJQGrid").jqGrid('setGridWidth', parseInt($(window).width()) - 120);
        }

    )
    //切换年月日显示隐藏
    select2.change(function (val) {

            refreshJQGrid()
        }

    )
    //切换选择名称菜单显示单条柱状图数据
    select3.change(function (val) {
        let value= select3.find('option:selected').text()
        console.log(value)
        init(select3.val(),list,value)

    })
    //刷新表格
    function refreshJQGrid() {
        $("#IVRJQGrid").jqGrid("setGridParam", {
            url: "<%=basePath %>/ivrReportForms/ivrList.do",
            mtype: 'POST',
            datatype: "json",
            postData: getJQGridFilterData()
        }).trigger("reloadGrid");
    }
    function getIVRecharts() {
        $.ajax({
            url: "<%=basePath%>/ivrReportForms/ivrList2.do",
            data: getJQGridFilterData(),
            async: false,
            dataType: "json",
            success: function (data) {
                console.log(data)
                let list=data.dataList
                let value= select3.find('option:selected').text()
                if(value){
                    init(select3.val(),list,value)
                }
                else{
                    init('ivrIncomingCallCount',list,"IVR呼入量")
                }

            },
            error: function (data) {

            }
        });
    }

    window.addEventListener("resize",function(){
        myChart.resize();
    });

    $(function () {
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = "Bootstrap";
        $("#IVRJQGrid").jqGrid({
            height: 434,
            width:"100%",
            autowidth:true,
            autoScroll: true,
            shrinkToFit: true, /*  autoScroll: false, *//*forceFit: true, */
            colNames:colName3,
            colModel:[
                {name: "id", index: "id",key: true,align: "left",hidden: true},
                {name: "showDate", index: "showDate",width:"100px", hidden: false},
                {name: "ivrIncomingCallCount", index: "ivrIncomingCallCount",width:"100px",  hidden: false},
                {name: "ivrUserVolumeCount", index: "ivrUserVolumeCount", width:"100px",hidden: false},
                {name: "ivrResponseVolumeCount", index: "ivrResponseVolumeCount",width:"100px", hidden: false},
                {name: "ivrResponseRate", index: "ivrResponseRate",width:"100px", align: "left"},
                {name: "ivrAbandonedQuantityCount", index: "ivrAbandonedQuantityCount",width:"100px", align: "left"},
                {name: "incomingLine", index: "incomingLine",align: "left",width:"100px"},
                {name: "listening", index: "listening",align:"left",width:"100px"},
                {name: "listeningRate", index: "listeningRate",align:"left",width:"100px"},
                {name: "robotAccessVolumeCount", index: "robotAccessVolumeCount",  align:"left",width:"120px"},
                {name: "robotSeatingCapacityCount", index: "robotSeatingCapacityCount", align: "left", width:"150px"},
                {name: "robotTransferSeatReceptionVolumeCount", index: "robotTransferSeatReceptionVolumeCount", hidden: false,width:"150px"},
                {name: "robotResponseRate", index: "robotResponseRate",hidden: false,width:"150px"},
                {name: "noListening", index: "noListening",hidden: true,width:"150px"},
                {name: "secondDay", index: "secondDay", hidden: true,width:"150px"},
                {name: "avgSecondDay", index: "avgSecondDay", align: "left", hidden: true,width:"150px"},
                {name: "giveUpByQueueCount", index: "giveUpByQueueAllCount",align: "left", hidden: true,width:"150px"},
            ],
            pager:"#IVRJQGridPager",
            viewrecords: true,
            sortable: true,
            sortname: 'duration',
            hidegrid: false,
            multiselect: false,
            url: "<%=basePath%>/ivrReportForms/ivrList.do",
            postData: getJQGridFilterData(),
            datatype: 'json',
            rownumbers: false,
            rownumWidth: 100,
            rowNum: 30,
            rowList: [15, 30, 50],
            jsonReader: {
                root: "dataList", page: "currPage", total: "totalPages",          //   很重要 定义了 后台分页参数的名字。
                records: "totalCount", repeatitems: false, id: "id"
            },
            loadComplete: function (data) {
                // 自动调整高度
                list = data.dataList;
                var resCount = data.records;
                var tableHeight = resCount * 30 + 40;
                $("#gbox_IVRJQGrid .ui-jqgrid-bdiv").css(
                    "cssText",
                    "height: " + tableHeight + "px!important;");
                $("#IVRJQGrid").jqGrid('setGridWidth', parseInt($(window).width()) - 120);

                getIVRecharts()


            },
            gridComplete: function (e) {
                // $("#IVRJQGrid").jqGrid('setLabel', 'rn', '序号', {
                //     'text-align': 'center',
                //     'font-size': '12px'
                // }, '');
                // 数据加载完成后
                // $("#gview_IVRJQGrid").css("width",'100%')

            }
        });
        var rows = [];
        var item = {};
        var count = 0;

    });

    //查询
    $("#btn_query").click(function () {
        refreshJQGrid();
    });
    $("#btn_export").click(function () {
        var data = $("#IVRJQGrid").jqGrid('getRowData');

        if (data.length == 0) {
            myNotify("warning", "", "暂无数据可导出！");
        } else {
            // console.log(getJQGridFilterData().startTime)
            // console.log(getJQGridFilterData().endTime)
            // console.log(getJQGridFilterData().way)
            let list=['showDate',...select.val()]
            let listValue=["日期"]
            colNames.forEach(res=>{
                if(select.val().includes(res.key)){
                    listValue.push(res.text)
                }
            })
            <%--console.log(listValue)--%>
            window.location.href = "<%=basePath%>/ivrReportForms/downLoadIvrListExcel.do?"+
                "&startTime=" + getJQGridFilterData().startTime + "&endTime=" + getJQGridFilterData().endTime
                + "&way=" + getJQGridFilterData().way +"&fieldName=" + list +"&listName=" + listValue;
        }
    });
    function init(info,infoList,value){
        let date=[]
        let item=[]
        infoList.forEach((res)=>{
            date.push(res.showDate)
            item.push(parseFloat(res[info]))
        })
        console.log(date)
        console.log(item)
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top:"10%",
                containLabel: true
            },
            // 值域
            // dataRange: {
            //     itemWidth: 15,
            //     color: ['#009688','#e0ffff']
            // },
            // tooltip: {
            //     trigger: 'item',
            //     formatter: "{a} <br/>{b} : {c} ({d}%)"
            // },
            legend: {
                // orient: 'vertical',
                // left: 'center',
                data:[value]
            },
            xAxis: [
                {
                    type: 'category',
                    data: date.reverse(),
                    axisTick: {
                        alignWithLabel: true
                    },
                    show: true
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: true,
                    name:"",

                },],
            series : [   {
                name: value,
                type: 'bar',
                data:item.reverse(),
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                color: ['#148FFF', '#148FFF', 'red'],
                barGap: '10%',
                barCategoryGap: '20%',
            }
            ]
        };
        myChart.setOption(option)
        window.onresize = option.resize;
    }

    $("#begin_date").val(getLastMonth());
    $("#end_date").val(getToday());
    function getJQGridFilterData(){
        var postData = {};
        // postData.way= $('#case_type').val();
        postData.way= $('#case_type2').val();
        //开始时间
        postData.startTime = $('#begin_date').val();
        //结束时间
        postData.endTime = $('#end_date').val();
        return postData;
    }
</script>
</body>
</html>
